import React, { Component } from 'react';
import { connect } from 'react-redux';
import echarts from 'echarts';
import FilterTool from '../../components/FilterTool';
import { Button, Row, Col, Icon, Badge, Select, Radio, message } from 'antd';
import services from '../../services/api';
import ProgressBox from '../../components/ProgressBox';
import './index.less';
import moment from 'moment';
import { RISK_LEVEL } from 'src/utils/constant';

const Option = Select.Option;

function mapStateToProps(state) {
  return {
    strategy_type: state.code.strategy_type || [],
    strategy_mode: state.code.strategy_mode || [],
  };
}

@connect(mapStateToProps)
class Dashborad extends Component {
  constructor(props) {
    super(props);
    this.state = {
      applications: [],
      events: [],
      filterItems: [],
      riskType: '1',
      riskTrendType: 4,
      riskTrend: [],
      requests: [
        {
          value: 0,
          percent: 0,
        },
        {
          value: 0,
          percent: 0,
        },
        {
          value: 0,
          percent: 0,
        },
        {
          value: 0,
          percent: 0,
        },
      ],
      app_id: '',
      event_id: '',
      start: '',
      end: '',
      type: '',
      current_start: '',
      rule_id: '',
      ruleTrend: [],
      ruleList: [],
      ruleTop: [],
      policyList: [],
      policy_id: '',
      policyTrend: [],
      strategyType: [],
      strategy_top: [],
      risk_type_top: [],
      risk_event_top: [],
      risk_top_ip: [],
      risk_top_user: [],
      risk_top_device: [],
      riskTopKey: 'risk_top_ip',
      riskTrendChart: 'line',
      minute1Index: 0,
      minute5Index: 0,
      minute30Index: 0,
      endIsToday: true,
      showLeftBtn: false,
      showRightBtn: false,
      endTime: '',
    };
    this.isAppChange = false;
    this.actionType = 'dashboard';
    this.trendLine = null;
    this.trendB = null;
    this.riskProportion = null;
  }

  componentDidMount() {
    this.getAppCodeList();
    this.getStrategyType();
    window.onresize = () => {
      this.trendB && this.trendB.resize();
      this.trendLine && this.trendLine.resize();
      this.riskProportion && this.riskProportion.resize();
      this.policyTrend && this.policyTrend.resize();
      this.ruleTrend && this.ruleTrend.resize();
      this.riskEventProportion && this.riskEventProportion.resize();
    };
  }

  updateFilter() {
    this.setState({
      filterItems: [
        {
          type: 'Select',
          key: 'app_id',
          name: 'app_id',
          label: '渠道',
          defaultValue: -1,
          allowClear: true,
          options: [
            ...this.state.applications.map((item) => {
              return {
                value: item.app_id,
                name: item.app_name,
              };
            }),
          ],
          onChange: this.onAppChangeSelect,
        },
        {
          type: 'Select',
          key: 'event_id',
          name: 'event_id',
          label: '事件',
          defaultValue: -1,
          allowClear: true,
          options: [
            ...this.state.events.map((item) => {
              return {
                value: item.event_id,
                name: item.event_name,
              };
            }),
          ],
          onChange: this.onEventChangeSelect,
        },
        {
          type: 'rangepicker',
          key: 'start',
          name: ['start', 'end'],
          label: '统计时间',
          defaultValue: [
            moment()
              .subtract(7, 'day')
              .startOf('day')
              .format('YYYY-MM-DD HH:mm:ss'),
            moment().format('YYYY-MM-DD HH:mm:ss'),
          ],
          disabledDate: (current) => {
            return current && current > moment().endOf('day');
          },
          ranges: {
            本周: [moment().startOf('week'), moment()],
            近7天: [moment().subtract('days', 6), moment()],
            本月: [moment().startOf('month'), moment()],
            近30天: [moment().subtract('days', 29), moment()],
          },
          format: 'YYYY-MM-DD HH:mm:ss',
          placeholder: ['起始时间', '结束时间'],
          allowClear: false,
        },
      ],
    });
  }

  getAppCodeList = () => {
    this.isAppChange = true;
    services.application.getAppCodeList().then((res) => {
      if (res.code === 0) {
        this.setState({
          applications: res.data,
        });
        this.getEventCodeList();
      } else {
        message.error(res.msg);
      }
    });
  };

  getEventCodeList = (app_id) => {
    services.event.getEventCodeList({ app_id: app_id || '-1' }).then((res) => {
      if (res.code === 0) {
        this.setState({
          events: res.data,
        });
        this.updateFilter();
        this.refs.filterTool.handleChange('event_id', -1);
      } else {
        message.error(res.msg);
      }
    });
  };

  onAppChangeSelect = (name, app_id) => {
    this.isAppChange = true;
    this.getEventCodeList(app_id);
  };

  freshQueryList = (params) => {};

  refreshFilter = (params) => {
    this.setState(
      {
        app_id: params.app_id || '',
        event_id: params.event_id || '',
        start: params.start,
        end: params.end,
      },
      () => {
        if (this.isAppChange) {
          this.isAppChange = false;
        } else {
          this.getRuleList(params.app_id, params.event_id);
          this.getRuleTop();
          this.getRiskTrend(this.state.riskTrendType);
          this.getPolicyList(params.app_id, params.event_id);
          services[this.actionType]
            .filter({
              app_id: this.state.app_id,
              event_id: this.state.event_id,
              start: this.state.start,
              end: this.state.end,
            })
            .then((res) => {
              if (res.code === 0) {
                const total =
                  (res.data.requests && res.data.requests.requests && res.data.requests.requests[0].value) || 0;
                let maxIndex = 0;
                let percentTotal = 0;
                const others = res.data.requests.requests.filter((item, index) => index > 0);
                others.forEach((item, index) => {
                  if (item.value > others[maxIndex].value) {
                    maxIndex = index;
                  }
                });
                maxIndex = maxIndex + 1;

                this.setState({
                  ...res.data.requests,
                  requests: res.data.requests.requests
                    .map((item, index) => {
                      if (index > 0 && total !== 0) {
                        if (index !== maxIndex) {
                          item.percent = Math.round((item.value / total) * 10000) / 100;
                          percentTotal += item.percent;
                        }
                      } else {
                        item.percent = 0;
                      }
                      return item;
                    })
                    .map((item, index) => {
                      if (index === maxIndex) {
                        item.percent =
                          res.data.requests.requests[maxIndex].value > 0
                            ? Math.round((100 - percentTotal) * 100) / 100
                            : 0;
                      }
                      return item;
                    }),
                });
                this.drawRiskProportion();
                this.drawRiskEventProportion();
              } else {
                message.error(res.msg);
              }
            });
        }
      }
    );
  };

  getStrategyType = () => {
    services[this.actionType].strategyType().then((res) => {
      if (res.code === 0) {
        this.setState({
          strategyType: res.data,
        });
      } else {
        message.error(res.msg);
      }
    });
  };

  getPolicyList = () => {
    services[this.actionType]
      .strategyList({
        app_id: this.state.app_id,
        event_id: this.state.event_id,
      })
      .then((res) => {
        if (res.code === 0) {
          this.setState({
            policyList: res.data,
            policy_id: res.data.length > 0 ? res.data[0].strategy_id : '',
          });
          this.getPolicyTrend(this.state.policy_id);
        } else {
          message.error(res.msg);
        }
      });
  };

  getPolicyTrend = (strategy_id) => {
    services[this.actionType]
      .strategyTrend({
        app_id: this.state.app_id,
        event_id: this.state.event_id,
        start: this.state.start,
        end: this.state.end,
        strategy_id: strategy_id,
      })
      .then((res) => {
        if (res.code === 0) {
          this.setState({
            policyTrend: res.data,
          });
          this.drawPolicyTrend();
        } else {
          message.error(res.msg);
        }
      });
  };

  prevData = () => {
    switch (this.state.riskTrendType) {
      case 1:
        this.setState(
          {
            minute1Index: this.state.minute1Index + 1,
          },
          this.getRiskTrend
        );
        break;
      case 2:
        this.setState(
          {
            minute5Index: this.state.minute5Index + 1,
          },
          this.getRiskTrend
        );
        break;
      case 3:
        this.setState(
          {
            minute30Index: this.state.minute30Index + 1,
          },
          this.getRiskTrend
        );
        break;
      default:
        break;
    }
  };

  nextData = () => {
    switch (this.state.riskTrendType) {
      case 1:
        this.setState(
          {
            minute1Index: this.state.minute1Index - 1,
          },
          this.getRiskTrend
        );
        break;
      case 2:
        this.setState(
          {
            minute5Index: this.state.minute5Index - 1,
          },
          this.getRiskTrend
        );
        break;
      case 3:
        this.setState(
          {
            minute30Index: this.state.minute30Index - 1,
          },
          this.getRiskTrend
        );
        break;
      default:
        break;
    }
  };

  getCurrentTime(riskTrendType) {
    let current_end = moment(this.state.end).format('YYYY-MM-DD HH:mm:ss');
    let current_start = moment(this.state.start).format('YYYY-MM-DD HH:mm:ss');
    const endTime = moment(this.state.end).valueOf();
    switch (riskTrendType) {
      case 1:
        current_end = moment(endTime - this.state.minute1Index * 3600000).format('YYYY-MM-DD HH:mm:ss');
        current_start = moment(endTime - (this.state.minute1Index + 1) * 3600000).format('YYYY-MM-DD HH:mm:ss');
        break;
      case 2:
        current_end = moment(endTime - this.state.minute5Index * 6 * 3600000).format('YYYY-MM-DD HH:mm:ss');
        current_start = moment(endTime - (this.state.minute5Index + 1) * 6 * 3600000).format('YYYY-MM-DD HH:mm:ss');

        break;
      case 3:
        current_end = moment(endTime - this.state.minute30Index * 24 * 3600000).format('YYYY-MM-DD HH:mm:ss');
        current_start = moment(endTime - (this.state.minute30Index + 1) * 24 * 3600000).format('YYYY-MM-DD HH:mm:ss');

        break;
      default:
        break;
    }

    return { current_start, current_end };
  }

  getRiskTrend() {
    let { current_start, current_end } = this.getCurrentTime(this.state.riskTrendType);
    // 计算左右切换按钮的显示隐藏状态，当current_start超出范围时限制在范围内
    let showLeftBtn = false,
      showRightBtn = false;
    if (this.state.riskTrendType !== 4) {
      switch (this.state.riskTrendType) {
        case 1:
          if (this.state.minute1Index !== 0) {
            showRightBtn = true;
          }
          break;
        case 2:
          if (this.state.minute5Index !== 0) {
            showRightBtn = true;
          }
          break;
        case 3:
          if (this.state.minute30Index !== 0) {
            showRightBtn = true;
          }

          break;
        default:
          break;
      }
      if (moment(current_start) >= moment(this.state.start)) {
        showLeftBtn = true;
      } else {
        current_start = this.state.start;
      }
    }
    this.setState({
      showLeftBtn,
      showRightBtn,
    });

    services[this.actionType]
      .riskTrend({
        app_id: this.state.app_id,
        event_id: this.state.event_id,
        start: this.state.start,
        end: this.state.end,
        type: this.state.riskTrendType,
        current_start: current_start,
        current_end: current_end,
      })
      .then((res) => {
        if (res.code === 0) {
          this.setState({
            riskTrend: res.data,
          });
          this.drawRiskTrend(this.state.riskTrendChart);
        } else {
          message.error(res.msg);
        }
      });
  }

  getRuleTrend = (rule_id) => {
    services[this.actionType]
      .ruleTrend({
        app_id: this.state.app_id,
        event_id: this.state.event_id,
        start: this.state.start,
        end: this.state.end,
        rule_id,
      })
      .then((res) => {
        if (res.code === 0) {
          this.setState({
            ruleTrend: res.data,
          });
          this.drawRuleTrend();
        } else {
          message.error(res.msg);
        }
      });
  };

  getRuleTop = (type) => {
    services[this.actionType]
      .ruleTop({
        app_id: this.state.app_id,
        event_id: this.state.event_id,
        start: this.state.start,
        end: this.state.end,
        type: type,
      })
      .then((res) => {
        if (res.code === 0) {
          this.setState({
            ruleTop: res.data,
          });
        } else {
          message.error(res.msg);
        }
      });
  };

  getRuleList = (app_id, event_id) => {
    services[this.actionType].ruleList({ app_id, event_id }).then((res) => {
      if (res.code === 0) {
        this.setState({
          ruleList: res.data,
          rule_id: res.data.length > 0 ? res.data[0].rule_id : '',
        });
        this.getRuleTrend(this.state.rule_id);
      } else {
        message.error(res.msg);
      }
    });
  };

  drawRiskTrend(type) {
    const data =
      type === 'bar' ? this.state.riskTrend.filter((item) => item.name !== '请求总量') : this.state.riskTrend;
    const series = data.map((item) => {
      return {
        name: item.name,
        type,
        stack: type === 'bar' ? type : item.name,
        data: item.value.map((item) => {
          return item.requests;
        }),
      };
    });
    const option = {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: data.map((item) => {
          return item.name;
        }),
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data:
          data &&
          data[0] &&
          data[0].value.map((item) => {
            return item.index;
          }),
      },
      yAxis: {
        type: 'value',
      },
      series: series,
    };
    if (type === 'line') {
      this.trendB && this.trendB.clear();
      this.trendB = null;
      this.trendLine = echarts.init(this.refs.riskTrend);
      this.trendLine.setOption(option);
    } else if (type === 'bar') {
      this.trendLine && this.trendLine.clear();
      this.trendLine = null;
      this.trendB = echarts.init(this.refs.riskTrend);
      this.trendB.setOption(option);
    }
  }

  drawRiskProportion = () => {
    let option = {
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: this.state.risk_type_top.map((item) => {
          return item.risk_type_name;
        }),
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: this.state.risk_type_top.map((item) => {
            return {
              value: item.hit_times,
              name: item.risk_type_name,
            };
          }),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
    this.riskProportion = echarts.init(this.refs.riskProportion);
    this.riskProportion.setOption(option);
  };

  drawPolicyTrend = () => {
    let option = {
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        type: 'category',
        data: this.state.policyTrend.map((item) => item.index),
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: this.state.policyTrend.map((item) => item.requests),
          type: 'line',
        },
      ],
    };

    this.policyTrend = echarts.init(this.refs.policyTrend);
    this.policyTrend.setOption(option);
  };

  drawRuleTrend = () => {
    let option = {
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        type: 'category',
        data: this.state.ruleTrend.map((item) => item.index),
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: this.state.ruleTrend.map((item) => item.requests),
          type: 'line',
        },
      ],
    };

    this.ruleTrend = echarts.init(this.refs.ruleTrend);
    this.ruleTrend.setOption(option);
  };
  drawRiskEventProportion = () => {
    let option = {
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: this.state.risk_event_top.map((item) => {
          return item.app_name + '-' + item.event_name;
        }),
      },
      series: [
        {
          name: '风险事件占比',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: this.state.risk_event_top.map((item) => {
            return {
              value: item.hit_times,
              name: item.app_name ? item.app_name + '-' + item.event_name : item.event_name,
            };
          }),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
    this.riskEventProportion = echarts.init(this.refs.riskEventProportion);
    this.riskEventProportion.setOption(option);
  };

  // 新增跳转链接到请求事件监控方法goTo
  goTo = (risk_level) => {
    const baseUrl = `/monitor/event?app_id=${this.state.app_id}&event_id=${
      this.state.event_id
    }&start_time=${encodeURIComponent(this.state.start)}&end_time=${encodeURIComponent(this.state.end)}`;
    const url = risk_level ? `${baseUrl}&risk_level=${risk_level}` : baseUrl;
    this.props.history.push(url);
  };

  render() {
    return (
      <div className='dashboard-page'>
        {this.state.filterItems && this.state.filterItems.length > 0 ? (
          <FilterTool
            ref='filterTool'
            data={this.state.filterItems}
            colNum={4}
            query={this.freshQueryList}
            refreshFilter={this.refreshFilter}
            isOnChange={true}
            justify='end'
          />
        ) : (
          ''
        )}
        <Row className='dashboard-row request-statistics' gutter={20} style={{ marginTop: '20px' }}>
          <Col span={6}>
            <div>
              <Icon type='pie-chart' style={{ backgroundColor: 'rgba(14, 125, 240, 0.15)' }} />
              <div>
                <p>{this.state.requests[0].name}</p>
                <p>{this.state.requests[0].value}</p>
              </div>
              <Button type='link' className='more' onClick={this.goTo.bind(this, '')}>
                More
              </Button>
            </div>
          </Col>
          <Col span={6}>
            <div>
              <Icon type='swap' style={{ color: 'rgb(33, 209, 180)', backgroundColor: 'rgba(33, 209, 180, 0.3)' }} />
              <div>
                <p>
                  {this.state.requests[1].name}
                  <Badge
                    count={this.state.requests[1].percent + '%'}
                    style={{ backgroundColor: 'rgb(33, 209, 180)', marginLeft: '10px' }}
                  />
                </p>
                <p>{this.state.requests[1].value}</p>
              </div>
              <Button type='link' className='more' onClick={this.goTo.bind(this, RISK_LEVEL._PASS)}>
                More
              </Button>
            </div>
          </Col>
          <Col span={6}>
            <div>
              <Icon
                type='exclamation'
                style={{ color: 'rgb(247, 129, 32)', backgroundColor: 'rgba(247, 129, 32, 0.3)' }}
              />
              <div>
                <p>
                  {this.state.requests[2].name}
                  <Badge
                    count={this.state.requests[2].percent + '%'}
                    style={{ backgroundColor: 'rgb(247, 129, 32)', marginLeft: '10px' }}
                  />
                </p>
                <p>{this.state.requests[2].value}</p>
              </div>
              <Button type='link' className='more' onClick={this.goTo.bind(this, RISK_LEVEL._REVIEW)}>
                More
              </Button>
            </div>
          </Col>
          <Col span={6}>
            <div>
              <Icon
                type='thunderbolt'
                style={{ color: 'rgb(247, 76, 33)', backgroundColor: 'rgba(247, 76, 33, 0.3)' }}
              />
              <div>
                <p>
                  {this.state.requests[3].name}
                  <Badge
                    count={this.state.requests[3].percent + '%'}
                    style={{ backgroundColor: 'rgb(247, 76, 33)', marginLeft: '10px' }}
                  />
                </p>
                <p>{this.state.requests[3].value}</p>
              </div>
              <Button type='link' className='more' onClick={this.goTo.bind(this, RISK_LEVEL._REJECT)}>
                More
              </Button>
            </div>
          </Col>
        </Row>
        <Row className='dashboard-row' gutter={20}>
          {/* 第一行 */}
          <Col span={14}>
            <div className='risk-trend-box'>
              <div className='chart-head'>
                <h4>风险趋势统计</h4>
                <div>
                  <Select
                    placeholder='请选择'
                    onChange={(e) => {
                      this.setState(
                        {
                          riskTrendType: e,
                        },
                        this.getRiskTrend
                      );
                    }}
                    value={this.state.riskTrendType}
                    dropdownMatchSelectWidth={false}
                  >
                    <Option value={1} key={1}>
                      每分钟
                    </Option>
                    <Option value={2} key={2}>
                      每5分钟
                    </Option>
                    <Option value={3} key={3}>
                      每30分钟
                    </Option>
                    <Option value={4} key={4}>
                      每天
                    </Option>
                  </Select>
                  <Radio.Group
                    value={this.state.riskType}
                    onChange={(e) => {
                      this.setState({ riskType: e.target.value });
                    }}
                    style={{ marginLeft: '10px' }}
                  >
                    <Radio.Button
                      value='1'
                      onClick={() => {
                        this.drawRiskTrend('line');
                        this.setState({
                          riskTrendChart: 'line',
                        });
                      }}
                    >
                      <Icon type='line-chart' />
                    </Radio.Button>
                    <Radio.Button
                      value='2'
                      onClick={() => {
                        this.drawRiskTrend('bar');
                        this.setState({
                          riskTrendChart: 'bar',
                        });
                      }}
                    >
                      <Icon type='bar-chart' />
                    </Radio.Button>
                  </Radio.Group>
                </div>
              </div>
              <div ref='riskTrend' className='chart-box' />
              {this.state.riskTrendType !== 4 ? (
                <div>
<<<<<<< HEAD
=======
<<<<<<< HEAD
                  {/* {this.state.showLeftBtn ? ( */}
                    <Button onClick={this.prevData} className='prev-btn' shape='circle'>
                      <Icon type='left' />
                    </Button>
                  {/* ) : (
                    ''
                  )}  */}
                {/* {this.state.showRightBtn ? ( */}
                    <Button onClick={this.nextData} className='next-btn' shape='circle'>
                      <Icon type='right' />
                    </Button>
                  {/* ) : (
                    ''
                  )} */}
=======
>>>>>>> f-gzns
                  {this.state.showLeftBtn ? (
                    <Button onClick={this.prevData} className='prev-btn' shape='circle'>
                      <Icon type='left' />
                    </Button>
                  ) : (
                    ''
                  )}
                  {this.state.showRightBtn ? (
                    <Button onClick={this.nextData} className='next-btn' shape='circle'>
                      <Icon type='right' />
                    </Button>
                  ) : (
                    ''
                  )}
<<<<<<< HEAD
=======
>>>>>>> f-gzns
>>>>>>> f-gzns
                </div>
              ) : (
                ''
              )}
            </div>
          </Col>
          <Col span={10}>
            <div>
              <div className='chart-head'>
                <h4>风险分类占比</h4>
              </div>
              <div ref='riskProportion' className='chart-box' />
            </div>
          </Col>

          {/* 第二行 */}
          <Col span={14}>
            <div>
              <div className='chart-head'>
                <h4>策略命中趋势</h4>
                <div>
                  <Select
                    placeholder='请选择'
                    allowClear
                    onChange={(e) => {
                      this.getPolicyTrend(e);
                      this.setState({
                        policy_id: e,
                      });
                    }}
                    dropdownMatchSelectWidth={false}
                    value={this.state.policy_id}
                  >
                    {this.state.policyList.map((item) => {
                      return (
                        <Option value={item.strategy_id} key={item.strategy_id}>
                          {item.name}
                          <span style={{ color: '#999' }}>
                            ({item.app_name}-{item.event_name})
                          </span>
                        </Option>
                      );
                    })}
                  </Select>
                </div>
              </div>
              <div ref='policyTrend' className='chart-box' />
            </div>
          </Col>
          <Col span={10}>
            <div>
              <div className='chart-head'>
                <h4>策略命中排行Top10</h4>
              </div>
              <div className='chart-box'>
                {this.state.strategy_top.length > 0 && (
                  <ProgressBox
                    leftLabel='策略名称'
                    rightLabel='命中次数'
                    keyValue={['name', 'hit_times']}
                    dataSource={this.state.strategy_top}
                    total={this.state.strategy_top[0].hit_times}
                    renderLabel={(record, index) => {
                      return (
                        <>
                          <span style={{ marginRight: '10px' }}>{index + 1}</span>
                          {record.name}
                          <span style={{ color: '#999' }}>
                            ({record.app_name}-{record.event_name})
                          </span>
                        </>
                      );
                    }}
                  />
                )}
              </div>
            </div>
          </Col>

          {/* 第三行 */}
          <Col span={14}>
            <div>
              <div className='chart-head'>
                <h4>规则命中趋势</h4>
                <div>
                  <Select
                    placeholder='请选择'
                    allowClear
                    onChange={(e) => {
                      this.getRuleTrend(e);
                      this.setState({
                        rule_id: e,
                      });
                    }}
                    value={this.state.rule_id}
                    dropdownMatchSelectWidth={false}
                  >
                    {this.state.ruleList.map((item) => {
                      return (
                        <Option value={item.rule_id} key={item.rule_id}>
                          {item.rule_id}
                          {item.name && `-${item.name}`}
                        </Option>
                      );
                    })}
                  </Select>
                </div>
              </div>
              <div ref='ruleTrend' className='chart-box' />
            </div>
          </Col>
          <Col span={10}>
            <div>
              <div className='chart-head'>
                <h4>规则命中排行Top10</h4>
                <div>
                  <Select
                    placeholder='请选择策略模式'
                    onChange={(e) => {
                      this.getRuleTop(e);
                      this.setState({
                        type: e,
                      });
                    }}
                    value={this.state.type}
                    allowClear
                    dropdownMatchSelectWidth={false}
                  >
                    {this.state.strategyType &&
                      this.state.strategyType.map((item) => {
                        return (
                          <Option value={item.key} key={item.key}>
                            {item.value}
                          </Option>
                        );
                      })}
                  </Select>
                </div>
              </div>
              <div className='chart-box'>
                {this.state.ruleTop.length > 0 && (
                  <ProgressBox
                    leftLabel='规则ID'
                    rightLabel='命中次数'
                    keyValue={['rule_id', 'hit_times']}
                    dataSource={this.state.ruleTop}
                    total={this.state.ruleTop[0].hit_times}
                    renderLabel={(record, index) => {
                      return (
                        <>
                          <span style={{ marginRight: '10px' }}>{index + 1}</span>
                          {record.rule_id}(<span style={{ color: '#999' }}>{record.name}</span>)
                        </>
                      );
                    }}
                    renderRight={(record) => {
                      return <>{record.hit_times}</>;
                    }}
                  />
                )}
              </div>
            </div>
          </Col>

          {/* 第四行 */}
          <Col span={14}>
            <div>
              <div className='chart-head'>
                <h4>风险事件占比</h4>
              </div>
              <div ref='riskEventProportion' className='chart-box' />
            </div>
          </Col>
          <Col span={10}>
            <div>
              <div className='chart-head'>
                <h4>风险命中排行Top10</h4>
                <div>
                  <Select
                    placeholder='请选择'
                    value={this.state.riskTopKey}
                    onChange={(e) => {
                      this.setState({ riskTopKey: e });
                    }}
                  >
                    <Option value={'risk_top_ip'} key={'risk_top_ip'}>
                      IP
                    </Option>
                    <Option value={'risk_top_user'} key={'risk_top_user'}>
                      账号
                    </Option>
                    <Option value={'risk_top_device'} key={'risk_top_device'}>
                      设备指纹
                    </Option>
                  </Select>
                </div>
              </div>
              <div className='chart-box'>
                {this.state[this.state.riskTopKey].length > 0 && (
                  <ProgressBox
                    leftLabel={
                      this.state.riskTopKey === 'risk_top_ip'
                        ? 'IP'
                        : this.state.riskTopKey === 'risk_top_user'
                        ? '账号'
                        : '设备指纹'
                    }
                    rightLabel='命中次数'
                    keyValue={['key', 'request']}
                    dataSource={this.state[this.state.riskTopKey]}
                    total={this.state[this.state.riskTopKey][0].request}
                    renderLabel={(record, index) => {
                      return (
                        <>
                          <span style={{ marginRight: '10px' }}>{index + 1}</span>
                          {record.key}
                        </>
                      );
                    }}
                  />
                )}
              </div>
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}

export default Dashborad;
